<!--
 * @Description: 
 * @Author: Xiaochuan-W
 * @Date: 2023-04-21 17:01:01
 * @LastEditors: Xiaochuan-W
 * @LastEditTime: 2024-09-26 17:18:17
-->
<template>
	<XConfigProvider>

		<el-form
			ref="refForm"
			:model="formData"
			v-bind="$attrs"
			:size="($attrs['size'] as any)"
			:label-width="($attrs['label-width'] as string|number)||'auto'"
			:status-icon="$attrs['status-icon'] === undefined ? true : ($attrs['status-icon'] as boolean)"
		>
			<template v-for="(item, index) in schema" :key="index">
				<div v-if="item.type === 'title'" class="title">{{ item.label }}</div>
				<slot
					v-if="item.type === 'slot' && (item.show ? item.show(formData) : true)"
					:name="item.slot"
					:row="formData"
				></slot>
				<el-form-item
					v-if="item.type !== 'slot'&&item.type !== 'title' && (item.show ? item.show(formData) : true)"
					:label="item.label"
					:label-width="item.labelWidth"
					:rules="item.rules"
					:size="item.size"
					:prop="item.prop"
				>
					<template v-if="item.description" #label>
						{{ item.label }}
						<el-tooltip effect="light" placement="top">
							<template #content>
								<div v-html="item.description"></div>
							</template>
							<el-icon class="x-question-icon" :size="16">
								<QuestionFilled />
							</el-icon>
						</el-tooltip>
					</template>
					<slot
						v-if="item.inputProps && item.inputProps.slot"
						:name="item.inputProps.slot"
						:row="formData"
					></slot>
					<el-input
						v-else-if="['text', 'textarea', 'password'].includes(item.type)"
						v-model="formData[item.prop]"
						:type="item.type"
						v-bind="item.inputProps"
						:style="{width:item.inputProps?.width}"
						:disabled="disabledFun(item)"
						:maxlength="item.inputProps&&item.inputProps!['maxlength']"
						:minlength="item.inputProps&&item.inputProps!['minlength']"
						:show-word-limit="item.inputProps&&item.inputProps!['show-word-limit']"
						:placeholder="item.inputProps&&item.inputProps!['placeholder'] || `请输入${item.label.replace(':','')}`"
						:clearable="item.inputProps&&item.inputProps!['clearable']"
						:formatter="item.inputProps&&item.inputProps!['formatter']"
						:show-password="item.inputProps&&item.inputProps!['show-password']"
						:size="item.inputProps&&item.inputProps!['size']"
						:prefix-icon="item.inputProps&&item.inputProps!['prefix-icon']"
						:suffix-icon="item.inputProps&&item.inputProps!['suffix-icon']"
						:rows="item.inputProps&&item.inputProps!['rows']"
						:autosize="item.inputProps&&item.inputProps!['autosize']"
						:readonly="item.inputProps&&item.inputProps!['readonly']"
						@blur="(val: any) =>item.inputProps&&item.inputProps['blur'] ? item.inputProps['blur'](val) : ''"
						@focus="(val: any) =>item.inputProps&&item.inputProps['focus'] ? item.inputProps['focus'](val) : ''"
						@change="(val: any) =>item.inputProps&&item.inputProps['change'] ? item.inputProps['change'](val) : ''"
						@input="(val: any) =>item.inputProps&&item.inputProps['input'] ? item.inputProps['input'](val) : ''"
						@clear="(val: any) =>item.inputProps&&item.inputProps['clear'] ? item.inputProps['clear'](val) : ''"

					>

						<template v-if="item?.inputProps?.slots?.prefix" #prefix>
							<div v-html="item.inputProps.slots.prefix"></div>
						</template>
						<template v-if="item?.inputProps?.slots?.suffix" #suffix>
							<div v-html="item.inputProps.slots.suffix"></div>
						</template>
						<template v-if="item?.inputProps?.slots?.prepend" #prepend>
							<div v-html="item.inputProps.slots.prepend"></div>
						</template>
						<template  v-if="item?.inputProps?.slots?.append" #append>
							<div v-html="item.inputProps.slots.append"></div>
						</template>
					</el-input>
					<el-input-number
						v-else-if="item.type === 'number'"
						v-model="formData[item.prop]"
						v-bind="item.inputProps"
						:style="{width:item.inputProps?.width}"
						:disabled="disabledFun(item)"
						:min="item.inputProps&&item.inputProps!['min']"
						:max="item.inputProps&&item.inputProps!['max']"
						:step="item.inputProps&&item.inputProps!['step']"
						:step-strictly="item.inputProps&&item.inputProps!['step-strictly']"
						:precision="item.inputProps&&item.inputProps!['precision']"
						:size="item.inputProps&&item.inputProps!['size']"
						:readonly="item.inputProps&&item.inputProps!['readonly']"
						:controls="item.inputProps&&item.inputProps!['controls']"
						:controls-position="item.inputProps&&item.inputProps!['controls-position']"
						:value-on-clear="item.inputProps&&item.inputProps!['value-on-clear']"
						@blur="(val: any) =>item.inputProps&&item.inputProps['blur'] ? item.inputProps['blur'](val) : ''"
						@change="(val: any) =>item.inputProps&&item.inputProps['change'] ? item.inputProps['change'](val) : ''"
						@focus="(val: any) =>item.inputProps&&item.inputProps['focus'] ? item.inputProps['focus'](val) : ''"
					>
					</el-input-number>
					<el-switch
						v-else-if="item.type === 'switch'"
						v-model="formData[item.prop]"
						v-bind="item.inputProps"
						:disabled="disabledFun(item)"
						:style="{width:item.inputProps?.width}"
						:loading="item.inputProps&&item.inputProps!['loading']"
						:size="item.inputProps&&item.inputProps!['size']"
						:width="item.inputProps&&item.inputProps!['width']"
						:inline-prompt="item.inputProps&&item.inputProps!['inline-prompt']"
						:active-icon="item.inputProps&&item.inputProps!['active-icon']"
						:inactive-icon="item.inputProps&&item.inputProps!['inactive-icon']"
						:active-text="item.inputProps&&item.inputProps!['active-text']"
						:inactive-text="item.inputProps&&item.inputProps!['inactive-text']"
						:active-value="item.inputProps&&item.inputProps!['active-value']"
						:inactive-value="item.inputProps&&item.inputProps!['inactive-value']"
						:active-color="item.inputProps&&item.inputProps!['active-color']"
						:inactive-color="item.inputProps&&item.inputProps!['inactive-color']"
						:border-color="item.inputProps&&item.inputProps!['border-color']"
						:before-change="item.inputProps&&item.inputProps!['before-change']"
						@change="(val: any) =>item.inputProps&&item.inputProps['change'] ? item.inputProps['change'](val) : ''"
					>
					</el-switch>

					<el-radio-group
						v-else-if="item.type === 'radio'"
						v-model="formData[item.prop]"
						v-bind="item.inputProps"
						:disabled="disabledFun(item)"
						:style="{width:item.inputProps?.width}"
						:size="item.inputProps&&item.inputProps!['size']"
						:text-color="item.inputProps&&item.inputProps!['text-color']"
						:fill="item.inputProps&&item.inputProps!['fill']"
						@change="(val: any) =>item.inputProps&&item.inputProps['change'] ? item.inputProps['change'](val) : ''"
					>
						<el-radio
							v-for="val,inx in item.inputProps&&item.inputProps!['list']"
							:key="inx"
							:value="
								item.inputProps && item.inputProps.propsAlias
									? val[item.inputProps.propsAlias.label||item.inputProps.propsAlias.value]
									: val.label||val.value
							"
						>
							{{
								item.inputProps && item.inputProps.propsAlias
									? val[item.inputProps.propsAlias.title]
									: val.title
							}}
						</el-radio>
					</el-radio-group>
					<el-radio-group
						v-else-if="item.type === 'radio-button'"
						v-model="formData[item.prop]"
						v-bind="item.inputProps"
						:style="{width:item.inputProps?.width}"
						:disabled="disabledFun(item)"
						:size="item.inputProps&&item.inputProps!['size']"
						:text-color="item.inputProps&&item.inputProps!['text-color']"
						:fill="item.inputProps&&item.inputProps!['fill']"
						@change="(val: any) =>item.inputProps&&item.inputProps['change'] ? item.inputProps['change'](val) : ''"
					>
						<el-radio-button
							v-for="val,inx in item.inputProps&&item.inputProps!['list']"
							:key="inx"
							:value="
								item.inputProps && item.inputProps.propsAlias
									? val[item.inputProps.propsAlias.label||item.inputProps.propsAlias.value]
									: val.label||val.value
							"
							:disabled="val.disabled"
						>
							{{
								item.inputProps && item.inputProps.propsAlias
									? val[item.inputProps.propsAlias.title]
									: val.title
							}}
						</el-radio-button>
					</el-radio-group>
					<el-checkbox-group
						v-else-if="item.type === 'checkbox'"
						v-model="formData[item.prop]"
						v-bind="item.inputProps"
						:style="{width:item.inputProps?.width}"
						:disabled="disabledFun(item)"
						:size="item.inputProps&&item.inputProps!['size']"
						:text-color="item.inputProps&&item.inputProps!['text-color']"
						:fill="item.inputProps&&item.inputProps!['fill']"
						@change="(val: any) =>item.inputProps&&item.inputProps['change'] ? item.inputProps['change'](val) : ''"
					>
						<el-checkbox
							v-for="val,inx in item.inputProps&&item.inputProps!['list']"
							:key="inx"
							:label="
								item.inputProps && item.inputProps.propsAlias
									? val[item.inputProps.propsAlias.label]
									: val.label
							"
							:disabled="val.disabled"
						/>
					</el-checkbox-group>
					<el-select
						v-else-if="item.type === 'select'"
						v-model="formData[item.prop]"
						v-bind="item.inputProps"
						:style="{width:item.inputProps?.width}"
						:disabled="disabledFun(item)"
						:size="item.inputProps&&item.inputProps!['size']"
						:placeholder="item.inputProps&&item.inputProps!['placeholder'] || `请选择${item.label.replace(':','')}`"
						:multiple="item.inputProps&&item.inputProps!['multiple']"
						:multiple-limit="item.inputProps&&item.inputProps!['multiple-limit']"
						:clearable="item.inputProps&&item.inputProps!['clearable']"
						:filterable="item.inputProps&&item.inputProps!['filterable']"
						:filter-method="item.inputProps&&item.inputProps!['filter-method']"
						:remote="item.inputProps&&item.inputProps!['remote']"
						:remote-method="item.inputProps&&item.inputProps!['remote-method']"
						:loading="item.inputProps && item.inputProps!['loading']"
						:loading-text="item.inputProps&&item.inputProps!['loading-text']"
						@change="(val: any) =>item.inputProps&&item.inputProps['change'] ? item.inputProps['change'](val) : ''"
						@visible-change="(val: any) =>item.inputProps&&item.inputProps['visible-change'] ? item.inputProps['visible-change'](val) : ''"
						@remove-tag="(val: any) =>item.inputProps&&item.inputProps['remove-tag'] ? item.inputProps['remove-tag'](val) : ''"
						@clear="
							() =>
								item.inputProps && item.inputProps['clear']
									? item.inputProps['clear']()
									: ''
						"
						@blur="(val: any) =>item.inputProps&&item.inputProps['blur'] ? item.inputProps['blur'](val) : ''"
						@focus="(val: any) =>item.inputProps&&item.inputProps['focus'] ? item.inputProps['focus'](val) : ''"
					>
						<el-option
							v-for="val,inx in item.inputProps&&item.inputProps!['list']"
							:key="inx"
							:label="
								item.inputProps && item.inputProps.propsAlias
									? val[item.inputProps.propsAlias.label]
									: val.label
							"
							:value="
								item.inputProps && item.inputProps.propsAlias
									? val[item.inputProps.propsAlias.value]
									: val.value
							"
							:disabled="val.disabled"
						/>
					</el-select>
					<el-tree-select
						v-else-if="item.type === 'tree-select'"
						v-model="formData[item.prop]"
						v-bind="item.inputProps"
						:style="{width:item.inputProps?.width}"
						:disabled="disabledFun(item)"
						:data="item.inputProps&&item.inputProps!['list']"
						:size="item.inputProps&&item.inputProps!['size']"
						:node-key="item.inputProps&&item.inputProps!['node-key']"
						:props="item.inputProps&&item.inputProps!['props'] || item.inputProps&&item.inputProps!['propsAlias']"
						:placeholder="item.inputProps&&item.inputProps!['placeholder'] || `请选择${item.label.replace(':','')}`"
						:check-strictly="item.inputProps&&item.inputProps!['check-strictly']"
						:multiple="item.inputProps&&item.inputProps!['multiple']"
						:multiple-limit="item.inputProps&&item.inputProps!['multiple-limit']"
						:render-after-expand="item.inputProps&&item.inputProps!['render-after-expand']"
						:clearable="item.inputProps&&item.inputProps!['clearable']"
						:filterable="item.inputProps&&item.inputProps!['filterable']"
						:filter-method="item.inputProps&&item.inputProps!['filter-method']"
						:remote="item.inputProps&&item.inputProps!['remote']"
						:remote-method="item.inputProps&&item.inputProps!['remote-method']"
						:load="item.inputProps&&item.inputProps!['load']"
						:lazy="item.inputProps&&item.inputProps!['lazy']"
						:loading="item.inputProps&&item.inputProps!['loading']"
						:loading-text="item.inputProps&&item.inputProps!['loading-text']"
						:default-expanded-keys="item.inputProps&&item.inputProps!['default-expanded-keys']"
						:cache-data="item.inputProps&&item.inputProps!['cache-data']"
						@change="(val: any) =>item.inputProps&&item.inputProps['change'] ? item.inputProps['change'](val) : ''"
						@visible-change="(val: any) =>item.inputProps&&item.inputProps['visible-change'] ? item.inputProps['visible-change'](val) : ''"
						@remove-tag="(val: any) =>item.inputProps&&item.inputProps['remove-tag'] ? item.inputProps['remove-tag'](val) : ''"
						@clear="
							() =>
								item.inputProps && item.inputProps['clear']
									? item.inputProps['clear']()
									: ''
						"
						@blur="(val: any) =>item.inputProps&&item.inputProps['blur'] ? item.inputProps['blur'](val) : ''"
						@focus="(val: any) =>item.inputProps&&item.inputProps['focus'] ? item.inputProps['focus'](val) : ''"
					></el-tree-select>
					<XTransferSelect
						v-else-if="item.type === 'transfer-select'"
						v-model="formData[item.prop]"
						v-bind="item.inputProps"
						:style="{width:item.inputProps?.width}"
						:disabled="disabledFun(item)"
						@node-click="
							(node:any) =>
								item.inputProps['nodeClick']
									? item.inputProps['nodeClick'](node)
									: ''
						"
					></XTransferSelect>
					<el-cascader
						v-else-if="item.type === 'cascader'"
						v-model="formData[item.prop]"
						v-bind="item.inputProps"
						:style="{width:item.inputProps?.width}"
						:disabled="disabledFun(item)"
						:options="item.inputProps&&item.inputProps!['options']"
						:props="item.inputProps&&item.inputProps!['props'] || item.inputProps&&item.inputProps!['propsAlias']"
						:size="item.inputProps&&item.inputProps!['size']"
						:placeholder="item.inputProps&&item.inputProps!['placeholder'] || `请选择${item.label.replace(':','')}`"
						:clearable="item.inputProps&&item.inputProps!['clearable']"
						:show-all-levels="item.inputProps&&item.inputProps!['show-all-levels']"
						:collapse-tags="item.inputProps&&item.inputProps!['collapse-tags']"
						:separator="item.inputProps&&item.inputProps!['separator']"
						:filterable="item.inputProps&&item.inputProps!['filterable']"
						:filter-method="item.inputProps&&item.inputProps!['filter-method']"
						@change="(val: any) =>item.inputProps&&item.inputProps['change'] ? item.inputProps['change'](val) : ''"
						@expand-change="(val: any) =>item.inputProps&&item.inputProps['expand-change'] ? item.inputProps['expand-change'](val) : ''"
						@blur="(val: any) =>item.inputProps&&item.inputProps['blur'] ? item.inputProps['blur'](val) : ''"
						@focus="(val: any) =>item.inputProps&&item.inputProps['focus'] ? item.inputProps['focus'](val) : ''"
						@clear="(val: any) =>item.inputProps&&item.inputProps['clear'] ? item.inputProps['clear'](val) : ''"
						@visible-change="(val: any) =>item.inputProps&&item.inputProps['visible-change'] ? item.inputProps['visible-change'](val) : ''"
						@remove-tag="(val: any) =>item.inputProps&&item.inputProps['remove-tag'] ? item.inputProps['remove-tag'](val) : ''"
					/>
					<el-date-picker
						v-else-if="['date', 'datetime'].includes(item.type)"
						v-model="formData[item.prop]"
						v-bind="item.inputProps"
						:style="{width:item.inputProps?.width}"
						:disabled="disabledFun(item)"
						:type="item.inputProps&&item.inputProps!['type']"
						:readonly="item.inputProps&&item.inputProps!['readonly']"
						:options="item.inputProps&&item.inputProps!['options']"
						:size="item.inputProps&&item.inputProps!['size']"
						:editable="item.inputProps&&item.inputProps!['editable']"
						:clearable="item.inputProps&&item.inputProps!['clearable']"
						:placeholder="item.inputProps&&item.inputProps!['placeholder'] || `请选择${item.label.replace(':','')}`"
						:start-placeholder="item.inputProps&&item.inputProps!['start-placeholder']"
						:end-placeholder="item.inputProps&&item.inputProps!['end-placeholder']"
						:format="item.inputProps&&item.inputProps!['format']"
						:range-separator="item.inputProps&&item.inputProps!['range-separator']"
						:value-format="item.inputProps&&item.inputProps!['value-format']"
						:unlink-panels="item.inputProps&&item.inputProps!['unlink-panels']"
						:prefix-icon="item.inputProps&&item.inputProps!['prefix-icon']"
						:disabled-date="item.inputProps&&item.inputProps!['disabled-date']"
						@change="(val: any) =>item.inputProps&&item.inputProps['change'] ? item.inputProps['change'](val) : ''"
						@blur="(val: any) =>item.inputProps&&item.inputProps['blur'] ? item.inputProps['blur'](val) : ''"
						@focus="(val: any) =>item.inputProps&&item.inputProps['focus'] ? item.inputProps['focus'](val) : ''"
						@clear ="(val: any) =>item.inputProps&&item.inputProps['clear '] ? item.inputProps['clear '](val) : ''"
						@calendar-change="(val: any) =>item.inputProps&&item.inputProps['calendar-change'] ? item.inputProps['calendar-change'](val) : ''"
						@panel-change="(val: any) =>item.inputProps&&item.inputProps['panel-change'] ? item.inputProps['panel-change'](val) : ''"
						@visible-change="(val: any) =>item.inputProps&&item.inputProps['visible-change'] ? item.inputProps['visible-change'](val) : ''"
					/>
					<el-time-picker
						v-else-if="item.type === 'time'"
						v-model="formData[item.prop]"
						v-bind="item.inputProps"
						:style="{width:item.inputProps?.width}"
						:disabled="disabledFun(item)"
						:readonly="item.inputProps&&item.inputProps!['readonly']"
						:size="item.inputProps&&item.inputProps!['size']"
						:editable="item.inputProps&&item.inputProps!['editable']"
						:clearable="item.inputProps&&item.inputProps!['clearable']"
						:placeholder="item.inputProps&&item.inputProps!['placeholder'] || `请选择${item.label.replace(':','')}`"
						:start-placeholder="item.inputProps&&item.inputProps!['start-placeholder']"
						:end-placeholder="item.inputProps&&item.inputProps!['end-placeholder']"
						:is-range="item.inputProps&&item.inputProps!['is-range']"
						:arrow-control="item.inputProps&&item.inputProps!['arrow-control']"
						:range-separator="item.inputProps&&item.inputProps!['range-separator']"
						:format="item.inputProps&&item.inputProps!['format']"
						:default-value="item.inputProps&&item.inputProps!['default-value']"
						:prefix-icon="item.inputProps&&item.inputProps!['prefix-icon']"
						:clear-icon="item.inputProps&&item.inputProps!['clear-icon']"
						:disabled-hours="item.inputProps&&item.inputProps!['disabled-hours']"
						:disabled-minutes="item.inputProps&&item.inputProps!['disabled-minutes']"
						:disabled-seconds="item.inputProps&&item.inputProps!['disabled-seconds']"
						@change="(val: any) =>item.inputProps&&item.inputProps['change'] ? item.inputProps['change'](val) : ''"
						@blur="(val: any) =>item.inputProps&&item.inputProps['blur'] ? item.inputProps['blur'](val) : ''"
						@focus="(val: any) =>item.inputProps&&item.inputProps['focus'] ? item.inputProps['focus'](val) : ''"
						@clear ="(val: any) =>item.inputProps&&item.inputProps['clear '] ? item.inputProps['clear '](val) : ''"
						@visible-change="(val: any) =>item.inputProps&&item.inputProps['visible-change'] ? item.inputProps['visible-change'](val) : ''"
					/>
					<el-time-select
						v-else-if="item.type === 'time-select'"
						v-model="formData[item.prop]"
						v-bind="item.inputProps"
						:style="{width:item.inputProps?.width}"
						:disabled="disabledFun(item)"
						:size="item.inputProps&&item.inputProps!['size']"
						:editable="item.inputProps&&item.inputProps!['editable']"
						:clearable="item.inputProps&&item.inputProps!['clearable']"
						:placeholder="item.inputProps&&item.inputProps!['placeholder'] || `请选择${item.label.replace(':','')}`"
						:prefix-icon="item.inputProps&&item.inputProps!['prefix-icon']"
						:clear-icon="item.inputProps&&item.inputProps!['clear-icon']"
						:format="item.inputProps&&item.inputProps!['format']"
						:start="item.inputProps&&item.inputProps!['start']"
						:step="item.inputProps&&item.inputProps!['step']"
						:end="item.inputProps&&item.inputProps!['end']"
						:min-time="item.inputProps&&item.inputProps!['min-time']"
						:max-time="item.inputProps&&item.inputProps!['max-time']"
						@change="(val: any) =>item.inputProps&&item.inputProps['change'] ? item.inputProps['change'](val) : ''"
						@blur="(val: any) =>item.inputProps&&item.inputProps['blur'] ? item.inputProps['blur'](val) : ''"
						@focus="(val: any) =>item.inputProps&&item.inputProps['focus'] ? item.inputProps['focus'](val) : ''"
						@clear ="(val: any) =>item.inputProps&&item.inputProps['clear '] ? item.inputProps['clear '](val) : ''"
					/>
					<template v-else-if="item.type === 'upload'">
						<el-input
							v-show="false"
							v-model="formData[item.prop]"
						></el-input>
						<XUpload
							:key="item.prop"
							v-model="formData[item.prop]"
							v-bind="item.inputProps"
							:disabled="disabledFun(item)"
							:ref-form="refForm"
						></XUpload>
					</template>

					<XEditor
						v-else-if="item.type === 'editor'"
						ref="aceEditor"
						v-model="formData[item.prop]"
						v-bind="item.inputProps"
						:width="item.inputProps&&item.inputProps!['width']"
						:height="item.inputProps&&item.inputProps!['height']"
						:readonly="item.inputProps&&item.inputProps!['readonly']"
						:theme="item.inputProps&&item.inputProps!['theme']"
						:mode="item.inputProps&&item.inputProps!['mode']"
					></XEditor>
					<XTinymce
						v-else-if="item.type === 'tinymce'"
						v-model="formData[item.prop]"
						v-bind="item.inputProps"
						:style="{height:(item.inputProps&&item.inputProps!['height'])||'100%'}"
						:width="item.inputProps&&item.inputProps!['width']"
						:height="item.inputProps&&item.inputProps!['height']"
						:readonly="item.inputProps&&item.inputProps!['readonly']"
						:plugins="item.inputProps && item.inputProps!['plugins']"
						:toolbar="item.inputProps && item.inputProps!['toolbar']"
					></XTinymce>
					
				</el-form-item>
				
			</template>
		</el-form>
		<div v-if="!hideBtn" class="x-btns">
			<el-button class="x-btn-cancel" size="large" @click="cancelForm()">
				{{ $attrs['cancel-text'] || '取消' }}
			</el-button>
			<el-button
				class="x-btn-confirm"
				size="large"
				:loading="loading"
				@click="confirmForm()"
			>
			{{ $attrs['confirm-text'] || '确定' }}
			</el-button>
		</div>
		</XConfigProvider>
</template>

<script setup lang="ts">
import {ref,watch} from 'vue'
import XConfigProvider from '../XConfigProvider/index.vue'
import XTransferSelect from '../XTransferSelect/index.vue'
import XUpload from '../XUpload/index.vue'
import XEditor from '../XEditor/index.vue'
import XTinymce from '../XTinymce/index.vue'
import { FormInstance,ElForm,ElFormItem,ElButton,ElInput,ElIcon,ElTooltip,ElInputNumber,ElSwitch,ElRadio,ElRadioGroup,ElRadioButton,ElCheckbox,ElCheckboxGroup,ElSelect,ElOption,ElTreeSelect,ElCascader,ElDatePicker,ElTimePicker,ElTimeSelect } from 'element-plus';

import { QuestionFilled } from '@element-plus/icons-vue';

const props = defineProps({
	// 生成Form的布局结构数组
	schema: {
		type: Array as any,
		default: () => []
	},
	// 表单数据对象
	model: {
		type: Object as any,
		default: () => ({})
	},
	hideBtn: {
		type: Boolean,
		default: false
	}
});

const emit = defineEmits(['confirm', 'cancel']);
const refForm = ref<FormInstance>();
const aceEditor = ref<any>();
const formData = ref<Record<string, any>>(props.model);
function validateForm() {
	return new Promise((resolve) => {
		refForm.value?.validate((volid) => {
			if (volid) {
				resolve(formData.value);
			}
			resolve(false);
		});
	});
}
defineExpose({ validateForm, refForm });
function resetForm() {
	refForm.value?.resetFields();
}

async function cancelForm() {
	await resetForm();
	emit('cancel');
}
const loading = ref(false);
async function confirmForm() {
	const data = await validateForm();
	if (data) {
		loading.value = true;
		emit('confirm', data, () => {
			loading.value = false;
		});
	}
}
function disabledFun(item: any) {
	if (item.inputProps && item.inputProps.disabled) {
		if (typeof item.inputProps.disabled === 'function') {
			return item.inputProps.disabled(formData.value);
		}
		return item.inputProps.disabled;
	}
	return false;
}

watch(
	() => props.model,
	() => {
		formData.value = props.model;
		resetForm();
	}
);
</script>

<style lang="scss" scoped>
.x-question-icon {
	position: absolute;
	right: 4px;
	top: 50%;
	margin-top: -8px;
}
.title{
	background: url(./images/title-bg.png) no-repeat;
	height: 37px;
	line-height: 37px;
	padding-left: 24px;
	font-weight: bold;
	margin-bottom: 16px;
}
.x-btns {
	display: flex;
	justify-content: center;
	margin-top: 30px;
	.x-btn-cancel {
		width: 150px;
		background-image: linear-gradient(to right, #0ea7ef, #2ac0f6);
		color: #fff;
		font-size: 18px;
	}
	.x-btn-confirm {
		width: 150px;
		background-image: linear-gradient(to right, #3d75ff, #67aaff);
		color: #fff;
		font-size: 18px;
		margin-left: 34px;
	}
}
:deep(.el-form-item) {
	margin-bottom: 0;
}
:deep(.el-form-item.is-success .el-input__validateIcon) {
	svg {
		display: none;
	}
}
:deep(.el-form-item.is-success .el-input__validateIcon::after) {
	content: '';
	width: 12px;
	height: 12px;
	background-image: url('../images/success-icon.png');
	background-size: 100% 100%;
}
:deep(.el-form-item:last-of-type) {
	border-bottom: 1px solid #d5dde7;
}
:deep(.el-form-item.is-error) {
	.el-form-item__content {
		padding-bottom: 20px;
	}
}
:deep(.el-form-item__label) {
	position: relative;
	color: #555;
	padding-right: 20px;
	border-left: 1px solid #d5dde7;
	border-top: 1px solid #d5dde7;
	background-color: #ebf3fe;
	height: auto;
	display: flex;
	align-items: center;
}
:deep(.el-form-item__content) {
	border: 1px solid #d5dde7;
	border-bottom: none;
	padding: 4px;
}
:deep(.el-form-item__error) {
	left: 6px;
	top: calc(100% - 18px);
	z-index: 999;
}

</style>
